<template>
  <!-- 学生列表页面 -->
  <!-- 搜索栏目有问题 -->
  <div class="student">
    <!-- 头部部分 -->
    <div class="header">
      <!-- 查询学生信息 -->
      <el-select v-model="list.status" clearable placeholder="状态">
        <el-option label="未审核" value="未审核"></el-option>
        <el-option label="审核通过" value="审核通过"></el-option>
        <el-option label="审核不通过" value="审核不通过"></el-option>
        <el-option label="推荐" value="推荐"></el-option>
      </el-select>

      <el-input
        placeholder="标题"
        v-model="list.title"
        clearable
        style="width: 240px"
      ></el-input>

      <el-select v-model="list.categoryId" clearable placeholder="请选择栏目">
        <el-option
          v-for="stu in studentData.filter((item) => !item.parentId)"
          :key="stu.id"
          :label="stu.name"
          :value="stu.id"
        >
        </el-option>
      </el-select>

      <el-button type="primary" plain @click="searchStudent">查询</el-button>
      <el-button type="primary" style="float: right" @click="jmpCommit"
        >发布风采</el-button
      >
    </div>

    <!-- 主体部分 -->
    <div class="table_content">
      <!-- @row-click="handToDet" -->
      <!-- :preview-src-list="[scope.row.cover]" -->
      <!-- 显示所有资讯 -->
      <el-table :data="StudentInfo" style="width: 100%"  @row-click="handToDet">
        <!-- 序号 -->
        <el-table-column type="index" label="序号" align="center">
        </el-table-column>
        <!-- 资讯id -->
        <el-table-column label="封面" align="center">
          <!-- 作用域插槽 -->
          <template slot-scope="scope">
            <el-image
              style="width: 40px; height: 40px"
              :src="scope.row.cover"
              
            >
            </el-image>
          </template>
        </el-table-column>
        <!-- 资讯名称 -->
        <el-table-column label="风采" align="center">
          <template slot-scope="scope">
            <!-- 标题 -->
            <div style="font-weight: bold">{{ scope.row.title }}</div>
            <!-- 真实姓名 -->
            <div v-if="scope.row.baseUser">
              {{ scope.row.baseUser.realname }}
            </div>
            <!-- 栏目 -->
            <div v-if="scope.row.category">{{ scope.row.category.name }}</div>
            <!-- 时间 -->
            <div>{{ scope.row.publishTime | filter }}</div>
          </template>
        </el-table-column>
        <!-- 排序号 -->
        <el-table-column prop="status" label="状态" align="center">
          <template slot-scope="scope">
            <el-tag
              type="success"
              v-if="scope.row.status == '审核通过'"
              disable-transitions
              >{{ scope.row.status }}</el-tag
            >
            <el-tag
              type="danger"
              v-else-if="scope.row.status == '审核不通过'"
              disable-transitions
              >{{ scope.row.status }}</el-tag
            >
            <el-tag
              type="warning"
              v-else-if="scope.row.status == '推荐'"
              disable-transitions
              >{{ scope.row.status }}</el-tag
            >
            <el-tag type="info" v-else disable-transitions>{{
              scope.row.status
            }}</el-tag>
          </template>
        </el-table-column>
        <!-- 操作 -->
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <!-- 推荐按钮 -->
            <el-tooltip
              class="item"
              effect="dark"
              content="推荐"
              placement="top"
            >
              <el-button
                type="warning"
                icon="el-icon-star-off"
                circle
                @click.native.stop="RecommendStudent(scope.row)"
              ></el-button>
            </el-tooltip>
            <!-- 审核按钮 -->
            <el-tooltip
              class="item"
              effect="dark"
              content="审核"
              placement="top"
            >
              <el-button
                type="primary"
                icon="el-icon-edit"
                circle
                @click.native.stop="ExamineStudent(scope.row)"
              ></el-button>
            </el-tooltip>
            <!-- 删除按钮 -->
            <el-tooltip
              class="item"
              effect="dark"
              content="删除"
              placement="top"
            >
              <el-button
                type="danger"
                icon="el-icon-delete"
                circle
                @click.native.stop="DeleteStudent(scope.row.id)"
              ></el-button>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>

      <!-- 模态框 -->
      <el-dialog
        :title="title"
        :visible.sync="dialogFormVisible"
        width="60%"
        center
      >
        <el-form
          label-position="right"
          label-width="80px"
          :model="studentForm"
          ref="student_Form"
          disabled
        >
          <el-form-item label="标题" prop="title">
            <el-input v-model="studentForm.title"></el-input>
          </el-form-item>
          <p v-html="studentForm.content"></p>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="examineNotPass(studentForm.id)" type="danger" plain
            >审核不通过</el-button
          >
          <el-button type="success" @click="examinePass(studentForm.id)" plain
            >审核通过</el-button
          >
        </span>
      </el-dialog>
    </div>

    <!-- 底部部分 -->
    <div class="paginetion">
      <!-- 分页界面 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="list.page"
        :page-sizes="[2, 4, 6, 8]"
        :page-size="list.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import { get, post } from "@/utils/request";
import { mapActions, mapState } from "vuex";
import { showFileURL, uploadFileURL } from "@/utils/config";
import moment from "moment";
export default {
  data() {
    return {
      //获取所有学生信息
      StudentInfo: [],
      //
      uploadFileURL,
      //图片地址
      imageUrl: "",

      //学生表单
      studentForm: {
        //个人审核信息标题
        title: "",
        content: "",
        status: "",
        id: "",
      },
      //模态框
      dialogFormVisible: false,
      //模态框标题
      title: "",
      list: {
        page: 1,
        pageSize: 8,
      },
      //文本框
      elInput: "",
      //总页数绑定
      total: 10,
    };
  },
  // 过滤器 data:scope.row.publishTime 传入当前时间
  filters: {
    filter: function (date) {
      return moment(date).format("YYYY-MM-DD hh:mm:ss");
    },
  },
  computed: {
    ...mapState("student", ["studentData"]),
  },
  methods: {
    ...mapActions("student", ["getStudentItem"]),
    //获取所有学生风采
    async getAllStudent() {
      let res = await get("/article/pageQuery", this.list);
      // console.log(res);
      this.StudentInfo = res.data.list;
      this.total = res.data.total;
    },

    //搜索功能
    async searchStudent() {
      this.list.page = 1;
      if (this.list.status == "") {
        delete this.list.status;
      }
      this.getAllStudent();
    },

    none(){

    },
    //删除功能 val1:
    DeleteStudent(val1) {
      // console.log(val1);
      let obj = {
        id: val1,
      };
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          let res = await get("/article/deleteById", obj);
          this.$message({
            type: "success",
            message: "删除成功!",
          });
          this.getAllStudent();
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },

    //审核按钮 val1:
    async ExamineStudent(val1) {
      // console.log(val1);
      this.studentForm = { ...val1 };
      // console.log(this.personTitle);
      this.dialogFormVisible = true;
      this.title = "审核风采信息";
    },

    //推荐按钮 val1:scope.row
    RecommendStudent(val1) {
      let obj1 = {
        id: val1.id,
        status: "推荐",
      };
      this.$confirm("您确定要推送此资讯吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        center: true,
      })
        .then(async () => {
          let res = await post("/article/changeStatus", obj1);
          this.$message({
            type: "success",
            message: "推荐成功!",
          });
          this.getAllStudent();
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },

    //审核通过按钮 val1:studentForm.status
    async examinePass(val1) {
      // console.log(val1);
      let objpass = {
        id: val1,
        status: "审核通过",
      };
      let res = await post("/article/changeStatus", objpass);
      this.$message({
        message: "状态修改成功",
        type: "success",
      });
      this.dialogClose();
      this.getAllStudent();
    },

    //审核不通过按钮 val1:studentForm.status
    async examineNotPass(val1) {
      // console.log(val1);
      let objnotpass = {
        id: val1,
        status: "审核不通过",
      };
      let res = await post("/article/changeStatus", objnotpass);
      this.$message({
        message: "状态修改成功",
        type: "success",
      });
      this.dialogClose();
      this.getAllStudent();
    },

    //发布新功能
    jmpCommit() {
      //页面跳转
      this.$router.push({
        path: "Publish",
      });
    },

    //显示个人信息
    handToDet(row, column, event){
      this.$router.push({
        path:'Details',
        query:{
          id:row.id
        }
      })
      // console.log(row, column, event)
    },
    //关闭模态框
    dialogClose() {
      this.dialogFormVisible = false;
    },

    // 控制每页条数
    handleSizeChange(val) {
      // 将每页要展示的数据的条数进行绑定
      this.list.pageSize = val;
      this.list.page = 1;
      this.getAllStudent();
    },

    // 控制当前显示的页数
    handleCurrentChange(val) {
      // 将当前页数与分页插件控制页数绑定
      this.list.page = val;
      this.getAllStudent();
    },
  },

  created() {
    this.list.pageSize = 6;
    this.getAllStudent();
    this.getStudentItem();
  },
  mounted() {},
};
</script>
<style scoped>
.header {
  line-height: 40px;
}
.paginetion {
  position: fixed;
  bottom: 40px;
  right: 60px;
}
</style>